<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div>
        <div style="display: flex;align-items: center;justify-content: space-between;">
            <div style="display: flex;align-items: center;">
                <h2 style="margin: 0 20px 0 0;">注册用户走势图</h2>
                <el-radio-group v-model="flag">
                    <el-radio :label="2">15天</el-radio>
                    <el-radio :label="1">30天</el-radio>
                    <el-radio :label="0">一年</el-radio>
                </el-radio-group>
                <div style="font-size: small;color: #bbbbbb;margin-left: 20px;">
                    <i class="el-icon-info"></i>
                    用户注册量数据非实时显示，系统将于每天凌晨自动统计前一天的数据
                </div>
            </div>

            <el-button type="primary" @click="exportData" icon="el-icon-download" size="small"
                :loading="btnloading">导出</el-button>
        </div>
        <el-divider />
        <div ref="userlinechart" style="width: 100%; height: 300px;"></div>
    </div>
</template>

<script>
import UdCard from "@/components/UdCard";
// import echarts from 'echarts'
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, LineChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LineChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);

import { getDataCount, getUserChart, exportUserChart } from "@/api/home";

import { mapGetters } from "vuex";
export default {
    // filters: {},
    components: { UdCard },
    computed: {
        ...mapGetters(["user"]),

    },
    watch: {
        flag: function (val) {
            this.fetchData();
        }
    },
    data() {
        return {
            userData: [],
            flag: 2,
            btnloading: false,
        };
    },
    created() {
        this.fetchData();
    },

    methods: {

        exportData() {
            this.btnloading = true;
            var flag = this.flag;
            exportUserChart(flag).then((res) => {

                const blob = new Blob([res], {
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                });

                // 创建一个a标签
                const link = document.createElement("a");
                link.href = URL.createObjectURL(blob); // 设置文件的URL
                link.download = "注册用户数据.xlsx"; // 设置文件的下载名称

                // 模拟用户点击链接进行下载
                link.click();
                this.btnloading = false;
                // 释放URL对象
                URL.revokeObjectURL(link.href);
            });
        },

        fetchData() {
            this.loading = true;
            this.$emit("loadChange", true);
            var data = {
                flag: this.flag
            }
            getUserChart(data).then((resp) => {
                this.$emit("loadChange", false);
                this.loading = false;
                if (resp.status != 0) {
                    return;
                }
                this.userData = resp.data;
                this.initChart()
            });
        },

        initChart() {
            var labelArray = this.userData.result.map(obj => obj.label);
            var dataArray = this.userData.series
            var userlinechart = this.$refs.userlinechart;
            console.log(userlinechart, echarts);
            if (!userlinechart) {
                return;
            }
            const myChart = echarts.init(userlinechart);
            myChart.clear();
            myChart.setOption({
                // 在这里设置图表的配置项和数据
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'cross' }
                },
                xAxis: {
                    type: 'category',
                    data: labelArray,
                    axisLabel: {
                        rotate: 45 // 或 -90，根据需要调整旋转角度
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '注册用户数',
                },
                grid: {
                    left: '50px',   // 左边距
                    right: '0',  // 右边距
                    top: '50px',    // 上边距
                    // bottom: '10%'  // 下边距
                },
                series: [{
                    data: dataArray,
                    type: 'line',
                    lineStyle: {
                        color: '#3293f6' // 设置折线颜色为蓝色
                    },
                }]
            });
        }

    },
};
</script>

<style scoped></style>